<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>DoitCSS V2.3 常用JS交互 实例</title>
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="keywords" content="DoitCSS V1.0">
	<meta name="description" content="DoitCSS是根据bootstap改编的CSS框架">
	<!--基础-->
	<link href="../css/base.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--文字排版-->
	<link href="../css/typography.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--表格-->
	<link href="../css/tables.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--表单按钮-->
	<link href="../css/form-buttons.css?ver=v2.4" rel="stylesheet" type="text/css">
	<!--架构-->
	<link href="../css/layouts.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--元件-->
	<link href="../css/elements.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--图标-->
	<link href="../css/icons.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--菜单-->
	<link href="../css/navigation.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--分页-->
	<link href="../css/pagination.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--清除浮动-->
	<link href="../css/clear.css?ver=v2.3" rel="stylesheet" type="text/css">
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/layer/layer.min.js"></script>
	<script type="text/javascript" src="../js/common.js"></script>
	<style type="text/css">
	.label-note {
		width:90px;
		margin-right:15px;
		text-align:right;
		color:#555;
	}
	</style>
</head>
<script type="text/javascript">
function makeSure(){
	showMsg("这将是一个悲催的故事！", "danger");
}
$(function(){
	//内空非空检查
	$("#alert-btn").on("click", function(){
		if(!checkEmpty($("#title"), "标题不能为空！")){
			return false;
		}
		showMsg("成功通过！", "success");
	});

	//邮箱验证
	$("#validate-email-btn").on("click", function(){
		var email=$("#email").val();
		if(email==''){
			tipDanger($("#email"), "邮箱不能为空！");
			return false;
		}
		if(!validateEmail(email)){
			tipDanger($("#email"), "邮箱格式不正确");
			return false;
		}
		layer.msg("恭喜你，通过啦，亲!", {icon:1});
		tipSuccess($("#email"));

		return true;
	});

	//主页验证
	$("#validate-url-btn").on("click", function(){
		var url=$("#site").val();
		if(url==''){
			tipDanger($("#site"), "主页不能为空！");
			return false;
		}
		if(!validateUrl(url)){
			tipDanger($("#site"), "网址格式不正确");
			return false;
		}
		layer.msg("恭喜你，通过啦，亲!", {icon:1});
		tipSuccess($("#site"));

		return true;
	});

	//弹窗信息
	$('#alert-danger-btn').on("click", function(){
		alertMsg("成功的提示信息", "success");
	});

	//操作确认
	$('#confirm-btn').on('click', function(){
		confirmMsg("真的要删除？", makeSure);
	});

	//ajax交互
	$('#form-submit-btn').on('click', function(){
		//request表单验证
		if(!checkEmpty($("#title"), "标题不能为空！")){
			return false;
		}
		//提交按钮状态
		$(this).prop("disabled", true);	
		$("#processing").show();

		//ajax交互
		$.post('ajax-json.html', {name:"lucky Tommy"}, ajaxResponse, "json");

		//恢复交互前表单状态
		$(this).prop("disabled", false);
		$("#processing").hide();
	});
	
});
</script>
<body>
<div class="container">
	<fieldset>
		<legend>注册</legend>
		<form name="userinfo-form" method="post" action="#" class="form-control">
			<label class="label-note">标题：</label><input name="user-title" type="text" class="input" id="title"><br>
			<label class="label-note">用户名：</label><input name="user-name" type="text" class="input-sm border-success" placeholder="请输入用户名" id="user-name"><span class="ml5"><i class="icon icon-success"></i></span><br>

			<label class="label-note">密 码：</label><input name="user-password" type="password" class="input border-danger"><span class="tip-danger"><i class="icon icon-warning"></i>错误的提示信息</span><br>
			<label class="label-note">邮箱：</label><input name="user-email" type="text" class="input" id="email"><br>
			<label class="label-note">主页：</label><input name="user-site" type="text" class="input" id="site"><br>
			<label class="label-note">性 别：</label><input name="agant" type="radio" value="1">男 <input name="agant" type="radio" value="0">女<br>
			<label class="label-note">生日：</label><select name="birth-year"><option value="1993">1993</option><option value="1990" selected>1990</option><option value="1995">1995</option></select><br>
			<label class="label-note">课程：</label>
			<label><input name="kecheng" type="checkbox" value="yw"> 语文</label>
			<label><input name="kecheng" type="checkbox" value="sx"> 数学</label><br>
			<label class="label-note"> </label><input type="button" name="sbtn" value="提交" class="btn btn-secondary mt20 mb30" id="form-submit-btn"><span class="color-danger hide ml10" id="processing"><img src="../images/loaders/loader1.gif"> 处理中...</span>
		</form>
	</fieldset>
	<div class="mt30">
	<input type="button" name="alert-btn" value="信息提示" class="btn btn-success" id="alert-btn">
	<input type="button" name="validate-email-btn" value="邮箱验证" class="btn btn-danger" id="validate-email-btn">
	<input type="button" name="validate-url-btn" value="网址验证" class="btn btn-danger" id="validate-url-btn">
	<input type="button" name="alert-btn" value="弹窗提示" class="btn btn-success" id="alert-danger-btn">
	<input type="button" name="alert-btn" value="操作确认" class="btn btn-primary" id="confirm-btn">
	</div>
</div>
</body>
</html>